<template>
  <!-- 全部订单的卡片结构 -->
  <el-card class="box-card" style="margin-top: 20px">
    <template #header>
      <div class="card-header">
        <span>挂号订单</span>
      </div>
    </template>
    <!-- 用户选择表单区域 -->
    <el-form :inline="false" label-width="80">
      <el-form-item label="就诊人">
        <el-select placeholder="请选择就诊人" v-model="patientId" @change="getAllOrder">
          <el-option v-for="user in allUserArr" :key="user.id" :label="user.name" :value="user.id" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select placeholder="请选择订单状态" v-model="orderStatus" @change="getAllOrder">
          <el-option v-for="(state,index) in allOrderState" :key="index" :label="state.comment"  :value="state.status" ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <!-- 表格展示订单的数据 -->
    <el-table border style="margin: 15px 0px" :data="allOrderArr">
      <el-table-column label="就诊时间" prop="createTime"></el-table-column>
      <el-table-column label="医院" prop="hosname"></el-table-column>
      <el-table-column label="科室" prop="depcode"></el-table-column>
      <el-table-column label="医生" prop="title"></el-table-column>
      <el-table-column label="费用" prop="amount"></el-table-column>
      <el-table-column label="就诊人" prop="patientName"></el-table-column>
      <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
      <el-table-column label="操作">
        <template #="{row}">
          <el-button type="text" @click="goDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="limit"
      :page-sizes="[10, 20, 30, 40]"
      :background="true"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @current-change="getAllOrder"
      @size-change="handlerLimit"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
// 引入API
import {reqAllOrderInfo,reqAllUser,reqOrderState} from '@/api/user/index'
// 引入ts类型
import { allOrderInfoResponseData,Records,allUserResponseData,OrderStateResponseData,AllUserArr,OrderStateArr } from '@/api/user/type'
// 引入路由器
import { useRouter } from "vue-router";
// 获取路由器对象
let router = useRouter();
// 当前页码
let pageNo = ref<number>(1);
// 一页展示多少条数据
let limit = ref<number>(10);
// 订单总个数
let total = ref<number>(50);
// 收集就诊人id
let patientId = ref<string>('')
// 收集订单状态
let orderStatus = ref<string>('')
// 存储全部订单
let allOrderArr = ref<Records>([])
// 存储全部就诊人信息
let allUserArr = ref<AllUserArr>([])
// 存储全部订单状态
let allOrderState = ref<OrderStateArr>([])
// 组件挂载完毕获取全部订单数据
onMounted(()=>{
  // 获取全部订单数据
  getAllOrder();
  // 获取全部就诊人与订单状态信息
  getUserAndState();
})
// 封装一个方法获取全部订单数据
const getAllOrder = async (page:number = 1)=>{
  // 修改页码
  pageNo.value = page
  const result:allOrderInfoResponseData = await reqAllOrderInfo(pageNo.value,limit.value,patientId.value,orderStatus.value);
  if(result.code == 200){
    // 存储全部订单
    allOrderArr.value = result.data.records
    total.value = result.data.total
  }
}
// 点击详情按钮跳转到订单详情页的回调
const goDetail = (row:any)=>{
  // 编程式路由导航
  router.push({path:'/user/order',query:{orderId:row.id}})
}
// 一页展示的数据个数发生变化的回调
const handlerLimit = (pageSize:number)=>{
  // 修改一页的个数
  limit.value = pageSize
  // 重新获取全部订单数据
  getAllOrder();
}
// 获取全部就诊人与订单状态信息
const getUserAndState = async ()=>{
  // 请求全部就诊人数据
  const result:allUserResponseData = await reqAllUser();
  // 请求全部订单状态
  const result1:OrderStateResponseData = await reqOrderState();
  // 存储全部就诊人信息
  allUserArr.value = result.data
  // 存储全部订单状态
  allOrderState.value = result1.data
}
</script>

<style scoped lang="scss"></style>